<template>
    <div class="app-layout">
        <!-- 顶部 header -->
        <header class="header-bar">
            <div class="header-title">智慧校园·后台管理系统</div>
            <div class="header-actions">
                <div class="header-item" @click="go('/main')">首页</div>
                <el-dropdown @command="handleCommand">
                    <span class="header-item">{{ username }}<i class="el-icon-arrow-down"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </header>
        <div class="main-content">
            <div class="main-layout">
                <!-- 侧边栏 -->
                <div class="sidebar">
                    <div class="logo">
                        <img src="../../assets/logo.svg" alt="Logo" class="logo-img" />
                        <div class="logo-title">THINK<br />智慧校园</div>
                    </div>
                    <div class="menu-container">
                        <div v-for="(menu, idx) in menuList" :key="idx"
                            :class="['menu-item', { 'menu-item-active': activeIndex === idx }]"
                            @click="selectPrimary(idx)">
                            {{ menu.title }}
                        </div>
                    </div>
                </div>

                <!-- 二级菜单 -->
                <div class="submenu" v-if="menuList[activeIndex]">
                    <div class="submenu-title">{{ menuList[activeIndex].title }}</div>
                    <div v-for="sub in menuList[activeIndex].children" :key="sub.path" class="submenu-item"
                        @click="go(sub.path)">
                        {{ sub.title }}
                    </div>
                </div>

                <!-- 主内容区 -->
                <div class="content">
                    <router-view />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { menuList } from './menuData';

const activeIndex = ref(0);
const router = useRouter();
const username = ref('Admin');

function selectPrimary(idx: number) {
    activeIndex.value = idx;
}

function go(path: string) {
    router.push(path);
}

function logout() {
    router.replace('/');
}

function handleCommand(command: string) {
    if (command === 'logout') logout();
}
</script>

<style scoped>
.app-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}

.header-bar {
    width: 100%;
    height: 60px;
    background-color: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.header-title {
    font-size: 20px;
    font-weight: bold;
}

.header-actions {
    display: flex;
    align-items: center;
}

.header-item {
    margin-left: 16px;
    cursor: pointer;
}

.header-item:hover {
    color: #3bb6fd;
}

.main-content {
    display: flex;
    flex: 1;
    width: 100%;
    overflow: hidden;
}

.main-layout {
    display: flex;
    flex: 1;
}

/* 主菜单 */
.sidebar {
    width: 240px;
    background-color: #292a2c;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 24px;
}

.logo-img {
    width: 100px;
    border-radius: 50%;
}

.logo-title {
    margin-top: 8px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    white-space: pre-line;
}

.menu-container {
    flex: 1;
    width: 100%;
    overflow-y: auto;
}

.menu-item {
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.menu-item:hover,
.menu-item-active {
    background-color: #232324;
    font-weight: bold;
}

/* 二级菜单 */
.submenu {
    width: 200px;
    background-color: #323234;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.submenu-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
}

.submenu-item {
    font-size: 16px;
    padding: 8px 0;
    cursor: pointer;
    transition: color 0.3s;
}

.submenu-item:hover {
    color: #3bb6fd;
}

/* 内容区 */
.content {
    flex: 1;
    background-color: #f5f5f5;
    overflow: hidden;
}
</style>